<script>

/**
 * Orders Component
 */
export default {
  data() {
    return {
      title: "Orders",
      items: [
        {
          text: "Ecommerce"
        },
        {
          text: "Orders",
          active: true
        }
      ],
      ordersData: [
        {
          type: "资讯标签",
          num: "23",
          signNum: "12,123,761",
          unmarkNum: "22,356",
          signPercentage: "20%",
          correctNum: "23.7万",
          hoursNum: "160.2万",
          relation: 21,
        },{
          type: "标讯标签",
          num: "35",
          signNum: "553,761",
          unmarkNum: "356",
          signPercentage: "11%",
          correctNum: "3.7万",
          hoursNum: "29.8万",
          relation: 3,
        },{
          type: "工商信源",
          num: "230",
          signNum: "398,021,321",
          unmarkNum: "-",
          signPercentage: "19%",
          correctNum: "28,769",
          hoursNum: "142,765",
          relation: 4,
        }
      ],
      totalRows: 100,
      currentPage: 1,
      perPage: 10,
      pageOptions: [10, 25, 50, 100],
      filter: null,
      filterOn: [],
      sortBy: "num",
      sortDesc: false,
      fields: [
        { key: "type", label: "标签类型" },
        { key: "num", sortable: true, label: "标签数量" },
        { key: "signNum", sortable: true, label: "标记数量" },
        { key: "unmarkNum", sortable: true, label: "未标数量" },
        { key: "signPercentage", sortable: true, label: "标记百分比" },
        { key: "correctNum", sortable: true, label: "修正数量" },
        { key: "hoursNum", sortable: true, label: "24小时标记量" },
        { key: "relation", sortable: true, label: "关联客户" },
      ],
    };
  },
  watch: {
    "currentPage": {
      handler(){
        console.log("触发更新");
      }
    }
  },
  methods: {
    /**
     * Search the table data with search input
     */
    onFiltered(filteredItems) {
      // Trigger pagination to update the number of buttons/pages due to filtering
      this.totalRows = filteredItems.length;
      this.currentPage = 1;
    },
  }
};
</script>

<template>
  <div class="card">
    <div class="card-body pt-0" style="padding-top: 1.25rem !important;">
      
      <div class="table-responsive">
        <b-table
          class="table-centered"
          :items="ordersData"
          :fields="fields"
          responsive="sm"
          :per-page="perPage"
          :current-page="1"
          :sort-by.sync="sortBy"
          :sort-desc.sync="sortDesc"
          :filter="filter"
          thead-class="thead-light"
          :filter-included-fields="filterOn"
          @filtered="onFiltered"
        >
          <template v-slot:cell(normal)="row">
            <div class="badge font-size-12 badge-soft-success">{{ row.value}}</div>
          </template>
          <template v-slot:cell(abnormal)="row">
            <div class="badge font-size-12 badge-soft-danger">{{ row.value}}</div>
          </template>
          <template v-slot:cell(total)="row">
            <div class="badge font-size-12 badge-soft-warning">{{ row.value}}</div>
          </template>
          <template v-slot:cell(action)>
            <a
              href="javascript:void(0);"
              class="mr-3 text-primary"
              v-b-tooltip.hover
              title="修改"
            >
              <i class="mdi mdi-pencil font-size-18"></i>
            </a>
            <a
              href="javascript:void(0);"
              class="text-danger"
              v-b-tooltip.hover
              title="删除"
            >
              <i class="mdi mdi-trash-can font-size-18"></i>
            </a>
          </template>
        </b-table>
      </div>
      <div class="row">
        <div class="col">
          <div class="dataTables_paginate paging_simple_numbers float-right">
            <ul class="pagination pagination-rounded mb-0">
              <!-- pagination -->
              <b-pagination v-model="currentPage" :total-rows="totalRows" :per-page="perPage"></b-pagination>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

